<?php

require_once("functions.php");
connectToDb();

$publicProvided = false;
$privateProvided = false;

if (isset($_REQUEST["publicToken"])) {
    $design = getDesignFromPublicToken($_REQUEST["publicToken"]);
    if ($design) {
        $publicProvided = true;
    }
}
if (isset($_REQUEST["privateToken"])) {
    $design = getDesignFromPrivateToken($_REQUEST["privateToken"]);
    if ($design) {
        $privateProvided = true;
    }
}

$featuredDesignList = getFeaturedDesigns();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>PlaygroundIdeas Designer</title>

        <!-- jscript -->
        <script type="text/javascript" src="js/kinetic-v3.9.4.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/objectLibrary.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        <script type="text/javascript" src="js/jquery.carouFredSel-5.5.5-packed.js"></script>
        <script type="text/javascript" src="js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
        <script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
        <script type="text/javascript" src="js/jquery.ui.droppable.js"></script>
        <script type="text/javascript" src="js/jquery.bpopup-0.7.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.zclip.js"></script>

        <!-- css reset if required -->
        <!--<link rel="stylesheet" href="css/reset.css" />-->
        <!-- main page styles -->
        <link rel="stylesheet" href="css/style.css" />
        <!--[if IE 6]>
      		<style type="text/css">
      			/* Images for an "image challenged" browser */
				#chrome, #firefox,
				#safari, #opera,
				#chrome:hover,
				#firefox:hover,
				#safari:hover, 
				#opera:hover      { background-position: 0 0;}
				
				#chrome           { background: url("images/ie6_icon_chrome.gif") no-repeat;}
				#firefox          { background: url("images/ie6_icon_firefox.gif") no-repeat;}
				#safari           { background: url("images/ie6_icon_safari.gif") no-repeat;}
				#opera            { background: url("images/ie6_icon_opera.gif") no-repeat; }
			</style>
    	<![endif]-->

		<link rel="icon" type="image/png" href="images/favicon.ico" />

        <script type="text/javascript">
            var baseUrl = "<?php echo BASE_URL; ?>";
            var templateBaseUrl = "<?php echo TEMPLATE_BASE_URL; ?>";
            var editBaseUrl = "<?php echo EDIT_BASE_URL; ?>";
            var showDesignBaseUrl = "<?php echo SHOW_DESIGN_BASE_URL; ?>";
        </script>
        
        <script type="text/javascript">
            $(document).ready(function() {
                <?php if ($publicProvided || $privateProvided) { ?>
                    var loadedConfig = <?php echo $design["content"]; ?>;
                    $(loadedConfig).each(function(index, element) {
                        var objectConfig = getObjectConfigById(element.type);
                        if (objectConfig) {
                            addObjectToStage(element.type, objectConfig.image, parseInt(element.x), parseInt(element.y), element.width, element.height, objectConfig.resizable);
                        }
                        else {
                            alert("Error loading saved objects!");
                            console.log(element);
                        }
                    });
					
					// populate toolbar fiels
                    $("#projectInput").val("<?php echo $design["name"]; ?>");                    
                    $("#sizeInput").val("<?php echo $design["size_width"]; ?>");
                    $("#xInput").val("<?php echo $design["size_length"]; ?>");
                    resizeCanvasFromFields();
					
					// populate welcome screen fields
					$("#welcomeWidth").val("<?php echo $design["size_width"]; ?>");
                    $("#welcomeLength").val("<?php echo $design["size_length"]; ?>");
                    
                    privateToken = "<?php echo $design["private_token"]; ?>";
                    publicToken = "<?php echo $design["public_token"]; ?>";
                    notes = "<?php echo $design["description"]; ?>";
                <?php } ?>
                
                <?php if (!$privateProvided) { ?>
                    // Before we can show the lightbox, we need to preload a few images
                    var imagesToPreload = [
                        '/images/welcome/welcome_bkdg.png',
                        '/images/welcome/goPlay.png',
                        '/images/welcome/goPlay_grey.png'
                    ];
                    
                    display_loading_screen("Loading...");
                    preloadImageArray(imagesToPreload, function() {
                        hide_loading_screen();
                        
                        $("#lightbox-splashScreen").bPopup({
                            fadeSpeed: 'slow',
                            followSpeed: 'fast',
                            escClose: false,
                            modalClose: false
                        });
                    });
                <?php } else { ?>
                    setUpPublicUrl();
                <?php } ?>
            });
        </script>
    </head>

    <body>
        
        <div id="fb-root"></div>

    	<div id="loading_screen">
    		<img src="/images/loading_spinner.gif"/>
  			<h1 id="loading_header">Loading... </h1>
  			<h3 id="loading_text">please wait...</h3>
		</div>

        <div id="mainContent">

            <!-- **** LIGHTBOXES **** -->
				<!-- Get a better browser -->
					 <div id='lightbox-browsers' style="display: none;">
							<div id='wrapper'>
								<p>Your browser doesn't seem to support HTML5 which is required for this page. Please choose one of the following:</p>
								<a id='chrome' href='http://www.google.com/chrome' target='_blank'>Google Chrome</a>
								<a id='firefox' href='http://www.firefox.com' target='_blank'>Mozilla Firefox</a>
								<a id='safari' href='http://www.apple.com/safari/download' target='_blank'>Apple Safari</a>
								<a id='opera' href='http://www.opera.com/download' target='_blank'>Opera</a>
							</div>
					</div>
				<!-- End Get a better browser -->
				
                <!-- Splash Screen Lightbox -->
                <div id="lightbox-splashScreen" style="display: none;">
                    <div id="welcomeScreen">

                        <div id="welcomeName">Name<input id="welcomeNameInput" class="cool-textbox" type="text" name="splash-projectName" placeholder="What is it called?" value="" /></div>
                        <div id="welcomeSize">
                            Size <input id="welcomeWidth" class="cool-textbox" type="text" value="30" placeholder="Width"/>
                            X <input id="welcomeLength" class="cool-textbox" type="text" value="15" placeholder="Length"/> Metres

                        </div>
                        <div id="welcomeDontWorryMessage">
                            Don't worry, you can change it at any time
                        </div>
                        <div id="welcomeEmail">
                            Email <input id="welcomeEmailInput" class="cool-textbox" type="text" name="splash-canvasEmail" placeholder="What is your email address?"/>
                        </div>
                        <div id="welcomeInfo">
                            We will send a link to you so you can edit your playground at any time
                        </div>
                        <div id="welcomeLegal">
                           <input id="welecomeLegalCheckbox" type="checkbox" name="legal" /></input>

                           <span id="welcomeLegalText1">I have read and and agree to the </span><span id="welcomeLegalText2"><a href ="http://www.bma.in/playground/Terms-of-use" target="_blank">terms and conditions</a></span>
                        </div>
                        <a id="welcomeGoPlayButton" class="off"></a>

                        <?php if (!isset($design)) { ?>
                            <div id="welcomeInpsireMessage"><span id="welcomeInspireMe">Inspire me. </span><span>See what others have created.</span></div>
                        <?php } ?>
                        
                        <div id="welcomeExampleImages">
                            <?php
                                if (isset($design)) {
                                    echo "<div class='selected'>";
                                    echo "<img src='" . $design["thumbnail_image"] . "' />";
                                    echo "<div>You have selected to base your design on the template \"" . $design["name"] . "\".</div>";
                                    echo "</div>";
                                }
                                else {
                                    foreach ($featuredDesignList as $featuredDesign) {
                                        echo "<a href='show_design.php?publicToken=" . $featuredDesign["public_token"] . "' class='exampleImage' title='" . $featuredDesign["name"] . "'><img src='" . $featuredDesign["thumbnail_image"] . "' /></a>";
                                    }
                                }
                            ?>
                        </div>
                    </div>
                </div> <!-- end lightbox-splashScreen -->

                <!-- Add Notes Lightbox -->
                <div id="lightbox-addNotes" style="display: none;">
                    <div id="notesLightBox">
                        <div id="notesLightBoxHeader">NOTES</div>
                        <textarea id="notesLightBoxTextArea">Insert your notes here.</textarea>
                        <div id="notesLightBoxCloseButton"><span id="notesLightBoxCloseButtonImg"></span></div>
                    </div>
                </div> <!-- end lightbox-addNotes -->

                <!-- Export Design Lightbox -->
                <div id="lightbox-exportDesign" style="display: none;">
                    <div id="exportDesign-container">
					
						
						
						<span class="export-divider"></span>
                        
                        <span id="export-print" class="export-item">Print</span>
                        
                        <input id="export-email-address" class='cool-textbox' type="text" value="" placeholder="Enter a friend's email address" style="display: none;" />
                        <span id="export-email" class="export-item">
                            <span id="show-export-email-options">Email</span>
                            <span id="send-export-email" style="display: none;">Send</span>
                        </span>
						
                        <span class="export-divider"></span>
                        <span id="share-fb-twitter" class="export-item">Share your playground on Facebook or Twitter:</span>
                        <div class="export-social-item">
                            <img class="export-social-img" src="images/exportdesign/facebook.png" alt="Share Your Design on Facebook" />
                            <div id="fb-like-container" class="export-social-text">
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div id="export-twitter" class="export-social-item">
                            <img class="export-social-img" src="images/exportdesign/twitter.png" alt="Share Your Design on Twitter" />
                            
                            <div id="twitter-tweet-container" class="export-social-text">
                                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div> <!-- end lightbox-exportDesign -->

                <!-- User Help Lightbox -->
                <div id="lightbox-userHelp" style="display: none;">
                    <img src="/images/infoScreen.png"/>
                </div> <!-- end lightbox-userHelp -->

            <!-- **** END LIGHTBOXES **** -->

            <div id="canvas-header">
                <div id="canvas-header-inputs">
                    <input id="projectInput" type="text" name="canvas-projectName"/>
                    <b>Size:</b><input id="sizeInput" type="text" value="30" />
                    <b>X</b><input id="xInput" type="text" value="15"/>  <b>metres</b>
                    <!--<a id="updateCanvasSize" href="#" title="Update Canvas Size">Update Canvas Size</a>-->
                </div> <!-- end canvas-header-inputs -->

                <div id="canvas-header-menu">
                    <img class="headerButton" id="saveButton" src="images/topNav_buttons/save_up.png"  alt="save" height="26" width="75" 
                        onmouseover="this.src='images/topNav_buttons/save_over.png'" onmouseout="this.src='images/topNav_buttons/save_up.png'"/>
                    <img class="headerButton" id="addNoteButton" src="images/topNav_buttons/note_up.png" alt="notes" height="20" width="26" 
                        onmouseover="this.src='images/topNav_buttons/note_over.png'" onmouseout="this.src='images/topNav_buttons/note_up.png'"/>
                    <img class="headerButton" id="toggleGridButton" src="images/topNav_buttons/grid_up.png" alt="grid" height="20" width="26" 
                        onmouseover="this.src='images/topNav_buttons/grid_over.png'" onmouseout="this.src='images/topNav_buttons/grid_up.png'"/>
                    <img class="headerButton" id="exportButton" src="images/topNav_buttons/share_up.png" alt="export" height="24" width="31" 
                        onmouseover="this.src='images/topNav_buttons/share_over.png'" onmouseout="this.src='images/topNav_buttons/share_up.png'"/>
                    <img class="headerButton" id="userHelpButton" src="images/topNav_buttons/info_up.png" alt="user help" height="24" width="24" 
                        onmouseover="this.src='images/topNav_buttons/info_over.png'" onmouseout="this.src='images/topNav_buttons/info_up.png'"/>
                </div> <!-- end canvas-header-menu -->
            </div> <!-- end canvas-header -->


            <div id="canvas-container"></div>


            <div id="canvas-footer">

                <div id="canvas-footer-scrollerGroupSelect">

                    <div id="canvas-footer-playground-group" class="group-selector selected"><span>Playground</span></div>
                    <div id="canvas-footer-landscape-group" class="group-selector"><span>Landscape</span></div>

                </div> <!-- end canvas-footer-scrollerGroupSelect -->

                <div id="canvas-footer-scroller-wrapper">

                    <div class="scrollerButtonContainer scrollerLeftButtonContainer">
                        <a href="#" id="playgroundScrollerPrevButton" class="scrollerButton scrollerPrevButton">Scroll Playground Designer Objects Left</a>
                        <a href="#" id="landscapeScrollerPrevButton" class="scrollerButton scrollerPrevButton">Scroll Landscape Designer Objects Left</a>
                    </div>
                    <div class="scrollerButtonContainer scrollerRightButtonContainer">
                        <a href="#" id="playgroundScrollerNextButton" class="scrollerButton scrollerNextButton">Scroll Playground Designer Objects Right</a>
                        <a href="#" id="landscapeScrollerNextButton" class="scrollerButton scrollerNextButton">Scroll Landscape Designer Objects Right</a>
                    </div>

                    <div id="canvas-footer-playgroundScroller">
                        <div class="innerScroller"></div>
                    </div> <!-- end canvas-footer-playgroundScroller -->

                    <div id="canvas-footer-landscapeScroller">
                        <div class="innerScroller"></div>
                    </div> <!-- end canvas-footer-landscapeScroller -->

                </div> <!--end canvas-footer-scroller-wrapper-->


            </div> <!-- end canvas-footer -->
		</div> <!--end mainContent -->
		
        <div class="disclaimer">This plan must be used in conjunction with our <a href="http://www.playgroundideas.org/content/basic-page/playground-manual" target="_blank">5-step manual</a> and <a href="http://playgroundideas.org/dev/Basic-safety-guidelines" target="_blank">safety manual</a>.</div>            
        
		<!-- Check for canvas support --> 
		<script type="text/javascript">checkCanvasSupport();</script>
		<!-- End check for canvas support -->
    </body>
</html>